

// --------------------- 1. 获取数据，展示到表格 ---------------------
const renderStudent = () => {
    axios.get('/students').then(({ data: res }) => {
        // console.log(res)
        let arr = res.data.map(item => {
            return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender === 0 ? '男' : '女'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province} ${item.city} ${item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
          </td>
        </tr>
        `
        })
        // console.log(arr.join(''))
        document.querySelector('tbody').innerHTML = arr.join('')
        document.querySelector('.total').innerHTML = arr.length
    })
}

renderStudent()

// 找到页面中的模态框盒子
// const modalBox = document.querySelector('#modal')

// 实例化模态框对象
const modal = new bootstrap.Modal(document.querySelector('#modal'))

document.querySelector('#openModal').addEventListener('click', function () {
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()
    modal.show()
})

async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')
    let { data: res } = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')

    province.addEventListener('change', async function () {
        area.innerHTML = `<option value="">--地区--</option>`
        let pname = province.value // 获取当前选择的省的名字
        if (pname === '') {
            return (city.innerHTML = `<option value="">--城市--</option>`)
        }
        const { data: res } = await axios.get('/api/city', { params: { pname } })

        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
    })

    city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value  // 获取当前选择的市的名字
        if (cname === '') {
            return (area.innerHTML = `<option value="">--地区--</option>`)
        }
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })

        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
    })


}
initCity()

// 点击弹层中的 确认 按钮的时候
document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))

    // 把数字类型的值转换一下
    data.age = +data.age // 如果使用 + 的方式转换，注意 +和变量 挨在一起
    data.gender = Number(data.gender)
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // 判断 是添加还是编辑
    let title = document.querySelector('#modal h5').innerHTML
    if (title === '添加学员') {
        // axaj提交
        try {
            const { data: res } = await axios.post('/students', data)
            message.success(res.message) // 使用插件提示
            renderStudent() // 更新页面数据
            modal.hide() // 关闭弹出层
        } catch (e) {
            message.error('添加失败')
        }
    }
    else if (title === '修改学员') {
        // axaj提交
        try {
            let id = document.querySelector('#modal h5').dataset.id
            const { data: res } = await axios.put(`/students/${id}`, data)
            message.success(res.message) // 使用插件提示
            renderStudent() // 更新页面数据
            modal.hide() // 关闭弹出层
        } catch (e) {
            message.error('修改失败')
        }
    }

})

// 删除
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 判断点击的是否是删除
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        if (!confirm('确定要删除吗')) return
        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent() // 更新页面数据
        } catch (e) {
            message.error('删除失败')
        }
    }

    // 判断是否点击了编辑
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // 修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        document.querySelector('#modal h5').setAttribute('data-id', id)
        modal.show()
        const { data: res } = await axios.get(`/students/${id}`)
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        // const [{ data: { data: c } }, { data: { data: d } }] = await Promise.all([p1, p2])
        // console.log(c);
        // console.log(d);
        const result = await Promise.all([p1, p2])
        // console.log(result[0].data.data);
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('')

        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        // console.log(result[1].data.data);

        val(document.querySelector('#form'), res.data)
    }
})






// // --------------------- 6. 删除和编辑的单击事件 ---------------
// document.querySelector('tbody').addEventListener('click', function (e) {
//     // 因为删除和编辑，都需要id，所以放到判断外部
//     let id = e.target.dataset.id
//     // console.log(id)
//     if (e.target.classList.contains('bi-trash')) {
//         // 说明点击了删除
//         message.confirm('提示', '你确定不要我了吗？', async res => {
//             if (res) {
//                 // axios.delete(`/students/187`)
//                 await axios.delete(`/students/${id}`)
//                 message.success('删除成功')
//                 renderStudent() // 更新页面数据
//             }
//         })
//     }

//     // if (e.target.classList.contains('bi-pen')) {
//     // 说明点击了编辑
//     if (e.target.classList.contains('bi-pen')) {
//         // 说明点击了编辑
//         modal.show() // 显示模态框
//         // 根据id，获取当前这个学员的详细信息
//         const { data: res } = await axios.get(`/students/${id}`)
//         // console.log(res)
//         // 获取市和县，获取后，渲染到对应的下拉框之后，才能数据回填
//         let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
//         let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
//         const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
//         console.log(c, a)
//         // [{ data: { data: c } }, { data: { data: a } }]
//         let arr2 = c.map(item => `<option value="${item}">${item}</option>`)
//         document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')

//         let arr3 = a.map(item => `<option value="${item}">${item}</option>`)
//         document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')
//         // val(表单) // 获取表单各项数据
//         // val(表单, 数据) // 数据回填。把数据回填到表单中【要求数据的键 ==== 表单各项的name属性值】
//         val(document.querySelector('#form'), res.data)
//     }
// })